<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          clearable
          @keyup.enter.native="getData()"
          placeholder="机构名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" class="btn-long" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:customer="scope">
        <span>{{ scope.row.customer_count || '-' }}</span>
        <!-- <el-button v-else
                   type="text"
                   @click="handleDetail(scope.row)">{{scope.row.customer_count}}</el-button> -->
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { addressCut } from '@vimi/utils-tool'

export default {
  components: {},
  data() {
    return {
      order: {
        customer_count: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'agency_type.eq': 3,
      },
      loading: false,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' } },
        { attrs: { label: '项目数量', prop: 'customer_count', align: 'center' }, slot: 'customer' },
        {
          attrs: { label: '在保余额', prop: 'left_funds', align: 'center' },
          process: v => v || '-',
        },
        {
          attrs: { label: '授信金额', prop: 'credit_amount', align: 'center' },
          process: v => v || '-',
        },
        { attrs: { label: '代偿金额(-)', prop: '', align: 'center' }, process: () => '-' },
      ],
      tableData: [],
      totalCount: 0,
      tableName: 'credit_agency_access_view',
      // visible: false,
      // serviceId: ''
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId']),
    queryAddressCode() {
      return this.user.queryAddressCode
    },
  },
  created() {
    this.params['orWhere.address_code.endlike'] = addressCut(this.queryAddressCode)
    this.params['orWhere.service_id.eq'] = this.clientId
    // this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.getCount()
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = data.data || []
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    // handleDetail(row) {
    //   this.serviceId = row.access_agency_id === this.clientId ? row.service_id : row.access_agency_id
    //   this.visible = true
    // },
    getCount() {
      const { index, size, ...params } = this.params
      params.groupFunc = `sum(${this.tableName}.customer_count),sum(${this.tableName}.left_funds),sum(${this.tableName}.credit_amount)`
      this.$api.getData(this.$serviceName, this.tableName, params).then(res => {
        const data = (res.data && res.data[0]) || {}
        this.tableColumns[1].attrs.label = `项目数量(${data.p || '-'})`
        this.tableColumns[2].attrs.label = `在保余额(${data.p1 || '-'} 万元)`
        this.tableColumns[3].attrs.label = `授信金额(${data.p2 || '-'} 万元)`
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
